import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useContext } from 'react';
import 'moment/locale/zh-cn';
import { useRouter } from 'next/router';
import { Tree, Radio, Space, Input, Tabs, Splitter } from 'antd';
import { WorkbenchesContext, } from '@/components/workbenches/workbenches-context';

import Home from './home';
import {
  ComponentType,
} from '@/components/workbenches/hooks/type';
import WTable from './components/table';
import WQuery from './components/query/index';
import WModel from './components/model';
import CopilotChat from './copilot-chat';
import WorkbenchesIcon from '@/components/workbenches/icons';

const dataTree = () => {
  const { t, i18n } = useTranslation();
  const router = useRouter();
  const {
    copilotVisible,
    setCopilotVisible,
    activeKey,
    setActiveKey,
    items,
    setItems,
    newTabIndex,
    onChange,
    onEdit,
    currentItem,
  } = useContext(WorkbenchesContext);
  console.log('currentItem', currentItem)

  return (

    <div className='w-5/6 h-full'>

      {
        !items?.length || !activeKey ?
          <Home /> :
          <>
            <Splitter style={{ height: '100%', boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' }}>
              <Splitter.Panel defaultSize="65%" min="50%" max="70%">
                <Tabs
                  className='p-2'
                  type="editable-card"
                  hideAdd={true}
                  onChange={onChange}
                  activeKey={activeKey}
                  onEdit={onEdit}
                  items={items.map((item) => {
                    let icon = null;
                    if (item.type === ComponentType.MODEL) {
                      icon = <WorkbenchesIcon type='模型' />;
                    } else if (item.type === ComponentType.QUERY) {
                      icon = <WorkbenchesIcon type='查询' />;
                    } else if (item.type === ComponentType.TABLE) {
                      icon = <WorkbenchesIcon type='表' />;
                    } else if (item.type === ComponentType.VIEW) {
                      icon = <WorkbenchesIcon type='视图' />;
                    } else if (item.type === ComponentType.MATERIALIZED_VIEW) {
                      icon = <WorkbenchesIcon type='物化视图' />;
                    }
                    return {
                      ...item,
                      label: (
                        <span className='flex items-center'>
                          <span>{icon}</span>
                          <span className='ml-2'>{item.label || item?.modelInfo?.name}</span>
                        </span>
                      ),
                    };
                  })}
                />
                <div className='w-full overflow-y-auto' style={{ height: 'calc(100% - 75px)' }}>
                  {
                    [ComponentType.TABLE, ComponentType.VIEW, ComponentType.MATERIALIZED_VIEW].includes(currentItem?.type) ? <WTable /> :
                      currentItem?.type == ComponentType.QUERY ? <WQuery /> :
                        currentItem?.type == ComponentType.MODEL ? <WModel setCopilotVisible={setCopilotVisible} /> : null
                  }
                </div>
              </Splitter.Panel>

              {/* 模型对话 */}
              {copilotVisible && currentItem?.type == ComponentType.MODEL && (
                <Splitter.Panel>
                  <CopilotChat setCopilotVisible={setCopilotVisible} copilotParams={currentItem} copilotType={'MODEL_INDEX'} chat_scene={'chat_with_db_metric_model_qa'} />
                </Splitter.Panel>
              )}
            </Splitter>
          </>
      }

    </div>
  );
}

export default dataTree;
